<template>
    <div class="rank">
        <div class="title">
            <p>热门景区排行</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="rank"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
let rank=ref();
onMounted(()=>{
    let mychart=echarts.init(rank.value);
    mychart.setOption({
        // 主标题
        title:{
            text:'景区排行',
            textStyle:{
                color:'yellowgreen',
                fontSize:20
            },
            left:'50%',
            subtext:'各大景区排行',
            subtextStyle:{
                color:'yellowgreen',
                fontsize:16,
            }

        },
        xAxis:{
            type:'category'
        },
        yAxis:{},
        grid:{
            left:20,
            bottom:20,
            right:20
        },
        series:[
            {
                type:'bar',
                data:[10,20,30,40,50,60,70],
                  //柱状图的:图形上的文本标签，
                  label: {
                    show: true,
                    //文字的位置
                    position: 'insideTop',
                    //文字颜色
                    color: 'yellowgreen'
                },
                //是否显示背景颜色
                showBackground: true,
                backgroundStyle: {
                    //底部背景的颜色，渐变背景颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'black' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            
                //柱条的样式
                itemStyle: {
                    borderRadius:[10, 10, 0, 0],
                    //柱条颜色
                    color:function(data:any){
                        //给每一个柱条这是背景颜色
                        let arr =['red','orange','yellowgreen','green','purple','hotpink','skyblue']
                         return arr[data.dataIndex];
                    }
                }
            },
            {
                type:'line',
                data:[10,20,30,40,50,60,90],
                smooth:true,//平滑曲线
            },
            {
                type: 'bar',
                data: [10, 20, 30, 40, 50, 60, 70],
                //柱状图的:图形上的文本标签，
                label: {
                    show: true,
                    //文字的位置
                    position: 'insideTop',
                    //文字颜色
                    color: 'yellowgreen'
                },
                //是否显示背景颜色
                showBackground: true,
                backgroundStyle: {
                    //底部背景的颜色
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'black' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                //柱条的样式
                itemStyle: {
                    borderRadius:[10, 10, 0, 0],
                    //柱条颜色
                    color:function(data:any){
                        //给每一个柱条这是背景颜色
                        let arr =['red','orange','yellowgreen','green','purple','hotpink','skyblue']
                         return arr[data.dataIndex];
                    }
                }
            },
        ],
        // 提示框
        tooltip:{}
    })
})
</script>

<style scoped lang="scss">
.rank {
    width: 100%;
    height: 100%;
    margin: 20px 0;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;

    .title {
        margin-left: 10px;

        p {
            font-size: 20px;
            color: white
        }


    }

    .charts {
        height: calc(100% - 30px);
    }
}
</style>